<template>
	<qh-page-view title="订单详情">
		<template v-if="pageLoaded">
			<view class="shadow-radius-item">
				<view class="content-title flex-spb-cn border-bottom">
					<text>订单详情</text>
					<text class="tips-color">{{order.order_source_type == 1 ? '微信扫码' : '支付宝扫码'}}</text>
				</view>
				<view class="list flex-spb-cn">
					<text class="list-title">订单编号</text>
					<view class="list-info flex-cn">
						<text>{{order.order_number}}</text>
						<text class="primary-color" @click="copyOrderNumber">复制</text>
					</view>
				</view>
				<view class="list flex-spb-cn">
					<text class="list-title">消费对象</text>
					<text class="list-info">{{order.consumer_type == 1 ? '散客' : order.vip_name}}</text>
				</view>
				<template v-if="order.consumer_type != 1">
					<view class="list flex-spb-cn">
						<text class="list-title">会员等级</text>
						<text class="list-info">{{order.vip_grade_name}}</text>
					</view>
					<view class="list flex-spb-cn">
						<text class="list-title">会员手机号</text>
						<text class="list-info">{{order.vip_phone}}</text>
					</view>
				</template>
				<view class="list flex-spb-cn">
					<text class="list-title">交易时间</text>
					<text class="list-info">{{order.payment_time}}</text>
				</view>
				<view class="list flex-spb-cn">
					<text class="list-title">支付类型</text>
					<text class="list-info">{{paymentMethod(order.payment_method)}}</text>
				</view>
				<view class="list flex-spb-cn">
					<text class="list-title">订单类型</text>
					<text class="list-info">{{order.order_type == 1 ? '付款订单' : '退款订单'}}</text>
				</view>
			</view>
			<view class="shadow-radius-item">
				<view class="content-title flex-spb-cn border-bottom">费用详情</view>
				<view class="list flex-spb-cn">
					<text class="list-title">订单金额</text>
					<text>￥{{order.order_amount}}</text>
				</view>
				<view class="list flex-spb-cn" v-if="order.vip_discount_amount * 1 > 0">
					<view class="list-title">
						<text>会员折扣优惠</text>
						<text class="primary-color">{{order.vip_discount}}折</text>
					</view>
					<text class="list-info green-text">-￥{{order.vip_discount_amount}}</text>
				</view>
				<view class="list flex-spb-cn" v-if="order.coupon_record_id && order.coupon_record_id * 1 > 0">
					<view class="list-title">
						<text>优惠券优惠</text>
						<text class="primary-color">{{order.coupon_describe}}</text>
					</view>
					<text class="list-info green-text">-￥{{order.coupon_amount}}</text>
				</view>
				<view class="list flex-spb-cn" v-if="order.integral_dis_amount * 1 > 0">
					<view class="list-title">
						<text>{{integral_name}}抵现优惠</text>
						<text class="primary-color">{{order.integral_dis_num}}{{integral_name}}抵{{order.integral_dis_amount}}元</text>
					</view>
					<text class="list-info green-text">-￥{{order.integral_dis_amount}}</text>
				</view>
				<view class="list flex-spb" v-if="order.payment_method == 3">
					<text class="list-title">组合支付</text>
					<view class="list-info">
						<view class="payment-type flex-spe-cn" v-for="(item, index) in order.pay_order_list" :key="index">
							<text class="qh-rt-single payment-type-icon" :class="[getPayTypeIcon(item.pay_type)]"></text>
							<text>{{payOrderMethod(item.pay_type)}}</text>
							<text class="mar-l-20">￥{{item.trade_amount}}</text>
						</view>
					</view>
				</view>
				<view class="content-title flex-spb-cn border-top font500">
					<text>实际支付金额</text>
					<text>￥{{order.actual_payment_amount}}</text>
				</view>
			</view>
			<view class="shadow-radius-item">
				<view class="content-title flex-spb-cn border-bottom">订单备注</view>
				<view class="list">
					<view class="list-info text-wrap">{{order.remark !== '' && order.remark !== null ? order.remark : '--'}}</view>
				</view>
			</view>
		</template>
		<view v-else class="empty-page flex-cn-cn">
			<qh-loading :value="!pageLoaded"></qh-loading>
		</view>
	</qh-page-view>
</template>

<script>
	export default {
		data() {
			return {
				order_number: '',
				order: {},
				pageLoaded: false,
				integral_name:''
			}
		},
		async onLoad(options) {
			this.order_number = options.order_number;
			await this.$onLaunched;
			this.getOrderDetail();
		},
		methods: {
			//复制单号
			copyOrderNumber() {
				uni.setClipboardData({
					data: this.order.order_number,
					success(res) {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			paymentMethod(type) {
				let str = '';
				switch (type) {
					case '1':
						str = '微信支付';
						break;
					case '2':
						str = '余额支付';
						break;
					case '3':
						str = '组合支付';
						break;
					case '4':
						str = '支付宝支付';
						break;
				}
				return str;
			},
			payOrderMethod(type) {
				let str = '';
				switch (type) {
					case '2':
						str = '支付宝支付';
						break;
					case '4':
						str = '微信支付';
						break;
					case '6':
						str = '余额支付';
						break;
				}
				return str;
			},
			getPayTypeIcon(type) {
				let icon = '';
				let color = '';
				switch (type) {
					case '2':
						icon = 'qh-rt-a-lujing1531';
						color = 'alipay-icon';
						break;
					case '4':
						icon = 'qh-rt-a-zu4332';
						color = 'wechat-pay-icon';
						break;
					case '6':
						icon = 'qh-rt-a-zu4331';
						color = 'balance-pay-icon';
						break;
				}
				return icon + ' ' + color;
			},
			async getOrderDetail() {
				const {
					status,
					data,
					message
				} = await this.$request({
					url: '/AggregationCode/User/getStoreAggregationOrderInfo'
				}, {
					order_number: this.order_number
				}, false);
				if (status != 1) return uni.showModal({
					title: '温馨提示',
					content: message,
					showCancel: false,
					confirmText: '确定',
					confirmColor: '#ff5c6d'
				})
				this.integral_name = this.$store.integral_name;
				this.pageLoaded = true;
				this.order = data;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F3F5;
	}

	.empty-page {
		background-color: #FFFFFF;
		width: 100vw;
		height: 100vh;
	}

	.shadow-radius-item {
		padding: 0 0 14rpx;
	}

	.content-title {
		height: 86rpx;
		color: #333333;
		font-size: 30rpx;
		line-height: 34rpx;
		padding: 0 20rpx;
	}

	.tips-color {
		color: #929397;
	}

	.list {
		padding: 12rpx 20rpx;

		.list-title {
			color: #999999;
			font-size: 28rpx;
			line-height: 36rpx;
		}

		.list-info {
			color: #333333;
			font-size: 28rpx;
			line-height: 36rpx;
		}

		.text-wrap {
			word-wrap: break-word;
			white-space: pre-wrap;
		}

		.primary-color {
			margin-left: 20rpx;
		}

		&:nth-last-child(1) {
			padding-bottom: 16rpx;
		}
	}

	.payment-type {
		color: #1E1E1E;
		margin-bottom: 10rpx;

		.payment-type-icon {
			font-size: 32rpx;
			margin-right: 12rpx;
		}

		.balance-pay-icon {
			color: #FF870E;
		}

		.wechat-pay-icon {
			color: #09BB07;
		}

		.alipay-icon {
			color: #3874F6;
		}
	}


	.mar-l-20 {
		margin-left: 20rpx;
	}
</style>
